<template>
    <div class="wrapper">
        <div class="title">
            <img :src="renderImg(store_logo)"/>
            <span>{{storeInfo.name}}</span>
        </div>
        <div class="notice">
            <img src="../components/common/img/volume-2.svg"/>
            <div class="notice-list">
                <div>公告:</div>
                <div class="notice-container">
                    <ul class="notice-ul" :style="noticeStyle">
                        <li class="notice-li" v-for="(item, index) in storeInfo.notice" :key="index">{{item}}</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="main">
            <ul class="groups">
                <li :class="[activeMenuName == item ? 'curr-group' : '' ]"
                    v-for="(item, index) in menuItem"
                    :key="index"
                    @click="toggleMenu(item)">{{item}}
                </li>
            </ul>
            <div class="foods">
                <ul class="foods-wrapper">
                    <li v-for="(item, index) in currentFoodList" :key="index">
                        <img v-lazy="renderImg(item.cui_cover)"/>
                        <div>
                            <div class="food-title">
                                <div class="name">{{item.cui_name}}</div>
                                <div class="desc">{{item.cui_subtitle}}</div>
                            </div>
                            <div class="price" v-if="item.is_dimen === 0">
                                <span>￥{{item.price_dimen[0].price || '0.00'}}</span>
                                <div class="step">
                                    <img src="../components/common/img/minus-circle.svg"
                                         :class="[item.price_dimen[0].copies > 0 ? '' : 'hidden']"
                                         @click="minusCopies(item.price_dimen[0])"/>
                                    <span :class="[item.price_dimen[0].copies > 0 ? '' : 'hidden']">{{item.price_dimen[0].copies}}</span>
                                    <img src="../components/common/img/plus-circle.svg"
                                         @click="plusCopies(item.price_dimen[0])"/>
                                </div>
                            </div>
                            <div v-else class="price">
                                <span>￥{{rendeGuigePrice(item.price_dimen)}}起</span>
                                <div class="step">
                                    <span class="guige" @click="selectGuige(item)">
                                        选规格
                                    </span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="foot-wrapper">
            <div class="footer">
                <div class="totalPrice">
                    <img src="../components/common/img/clipboard.svg" @click="showSelectMenu"/>
                    <div v-if="activeFoodList.length > 0">{{renderBillNum()}}</div>
                    <span>￥{{renderPrice()}}</span>
                </div>
                <div class="btn" @click="preSure" v-if="tableInfo.pre === 'y'">点好了</div>
                <div class="btn" @click="sure" v-else>点好了</div>
            </div>
            <div v-show="isShowSelect" class="select-menu">
                <order-list :activeFoodList="activeFoodList"
                            :showImg="false"
                            @plusCopies="plusCopies"
                            @minusCopies="minusCopies">
                </order-list>
            </div>
            <div class="mask" v-show="isShowSelect" @click.stop="hideSelectMenu"></div>
        </div>
        <mt-popup
                v-model="popup.isVisible"
                :closeOnClickModal="false"
                popup-transition="popup-fade">
            <div class="guige-body">
                <div class="header">选择分量<span class="close" @click="popup.isVisible = false"></span></div>
                <div class="body">
                    <div class="name">{{popup.data.cui_name}}</div>
                    <div class="list">
                        <div class="item" :class="[index == popup.activeIndex ? 'active' : '']"
                             v-for="(price_dimen, index) in popup.data.price_dimen"
                             :key="index"
                             @click="popup.activeIndex = index">{{price_dimen.dimen}}
                        </div>
                    </div>
                </div>
                <div class="foot">
                    <div class="item left">￥{{renderPopupPrice()}}<span class="unit">({{renderPopupDimen()}})</span>
                    </div>
                    <div class="item right" @click="sureGuige">确认添加</div>
                </div>
            </div>
        </mt-popup>
    </div>
</template>
<script>
    import axios from '../plugins/axios';
    import {Indicator, Toast} from 'mint-ui';
    import orderList from '../components/menu/orderList.vue'
    import _ from 'lodash'
    export default {
        async asyncData ({res, req, error}) {
            let response = {};
            let userInfo = res.locals.userInfo;
            let token = res.locals.token;
            let tableInfo = req.query;
            try {
                response = await axios.get('/api/h5/customer/cuisine', {
                    params: {
                        store_id: tableInfo.store,
                        token
                    }
                });
                response = response.data.data || {};
            } catch (e) {
                error({});
            }

            let store_logo = response.store.logo;
            let cuisine_info = response.cuisine_info;
            let keys = Object.keys(cuisine_info);
            keys.forEach((item) => {
                cuisine_info[item].forEach((d) => {
                    d.price_dimen.forEach((dimen) => {
                        dimen.copies = 0;
                    })
                })
            });
            return {
                cuisine_info: cuisine_info,
                storeInfo: response.store,
                userInfo,
                token,
                store_logo,
                tableInfo,
                menuItem: keys,
                activeMenuName: keys[0],
                currentFoodList: [],
                activeFoodList: []
            }
        },
        components: {
            orderList
        },
        head () {
            return {
                title: '点餐'
            }
        },
        data(){
            return {
                isShowSelect: false,
                noticeStyle: "top: 0",
                popup: {
                    isVisible: false,
                    activeIndex: 0,
                    data: {}
                }
            }
        },
        mounted(){
            this.currentFoodList = this.cuisine_info[this.activeMenuName];
            let activeFoodList = window.localStorage.getItem('activeFoodList');
            if (this.tableInfo.pre !== 'y' && activeFoodList) {
                this.dealStorage(JSON.parse(activeFoodList));
            }
            //公告轮播
            this.renderNotice()
        },
        methods: {
            dealStorage(activeFoodList){
                this.activeFoodList = activeFoodList;
                this.menuItem.forEach((menuItem) => {
                    this.cuisine_info[menuItem].forEach((d) => {
                        d.price_dimen.forEach((dimen) => {
                            let findItem = activeFoodList.find((l) => {
                                    return l.cui_dimen_id == dimen.cui_dimen_id
                                }) || {};
                            dimen.copies = findItem.copies || 0;
                        })
                    })
                });
            },
            toggleMenu(name){
                this.activeMenuName = name;
                this.currentFoodList = this.cuisine_info[name];
            },
            selectGuige(data){
                this.popup.activeIndex = 0;
                this.popup.isVisible = true;
                this.popup.data = data;
            },
            renderPopupPrice(){
                let data = this.popup.data;
                let activeIndex = this.popup.activeIndex;
                if (data.price_dimen) {
                    return data.price_dimen[activeIndex].price
                }
            },
            renderPopupDimen(){
                let data = this.popup.data;
                let activeIndex = this.popup.activeIndex;
                if (data.price_dimen) {
                    return data.price_dimen[activeIndex].dimen
                }
            },
            rendeGuigePrice(data){
                data = _.minBy(data, function (o) {
                    return o.price;
                });
                return data.price
            },
            sureGuige(){
                let data = this.popup.data;
                let activeIndex = this.popup.activeIndex;
                if (data.price_dimen) {
                    this.plusCopies(data.price_dimen[activeIndex])
                }
                this.popup.isVisible = false;
            },
            plusCopies(item){
                this.plusItem(item);
                this.setActiveFoodList();
            },
            minusCopies(item){
                this.minusItem(item);
                this.setActiveFoodList();
            },
            plusItem(item){
                this.menuItem.forEach((menuItem) => {
                    this.cuisine_info[menuItem].forEach((d) => {
                        d.price_dimen.forEach((dimen) => {
                            if (dimen.cui_dimen_id === item.cui_dimen_id) {
                                dimen.copies += 1;
                            }
                        })
                    })
                });

            },
            minusItem(item){
                this.menuItem.forEach((menuItem) => {
                    this.cuisine_info[menuItem].forEach((d) => {
                        d.price_dimen.forEach((dimen) => {
                            if (dimen.cui_dimen_id === item.cui_dimen_id) {
                                dimen.copies -= 1;
                            }
                        })
                    })
                });
            },
            setActiveFoodList(){
                let activeFoodList = [];
                this.menuItem.forEach((menuItem) => {
                    this.cuisine_info[menuItem].forEach((d) => {
                        d.price_dimen.forEach((dimen) => {
                            if (dimen.copies > 0) {
                                activeFoodList.push(Object.assign({}, dimen, {cui_info: d}));
                            }
                        })
                    })
                });
                let keyByList = _.keyBy(activeFoodList, 'cui_dimen_id');
                activeFoodList = _.map(keyByList, (d) => {
                    return d
                });
                this.activeFoodList = _.uniq(activeFoodList);
            },
            renderNotice(){
                let _this = this;
                let notice = _this.storeInfo.notice || [];
                let length = notice.length;
                let time = 0;
                setInterval(() => {
                    _this.noticeStyle = `top:${time * -32}px`;
                    time++;
                    if (time == length) {
                        time = 0
                    }
                }, 3000);
            },
            renderBillNum(){
                let num = 0;
                this.activeFoodList.forEach((item) => {
                    num += item.copies
                });
                return num
            },
            renderPrice(){
                let price = 0;
                this.activeFoodList.forEach((item) => {
                    price += item.copies * item.price
                });
                return Math.round(price * 100) / 100
            },
            showSelectMenu(){
                if (this.activeFoodList.length > 0) {
                    this.isShowSelect = !this.isShowSelect
                }
            },
            hideSelectMenu(){
                this.isShowSelect = false
            },
            sure(){
                if (this.activeFoodList.length > 0) {
                    window.localStorage.setItem('activeFoodList', JSON.stringify(this.activeFoodList));
                    if (this.tableInfo.extra === 'y') {
                        window.location.href = `/confirm?store=${this.tableInfo.store}&table=${this.tableInfo.table}&num=${this.tableInfo.num}&order=${this.tableInfo.order}&extra=y`
                    } else {
                        window.location.href = `/confirm?store=${this.tableInfo.store}&table=${this.tableInfo.table}&num=${this.tableInfo.num}`
                    }

                } else {
                    Toast('请先选择菜品')
                }
            },
            preSure(){
                if (this.activeFoodList.length > 0) {
                    Indicator.open('创建订单中...');
                    let tableInfo = this.tableInfo;
                    let cuisine_menu = [];
                    this.activeFoodList.forEach((item) => {
                        cuisine_menu.push({
                            "cui_dimen_id": item.cui_dimen_id,
                            "copies": item.copies
                        });
                    });
                    axios.post('/api/h5/customer/pre-cuisine', {
                        store_id: tableInfo.store,
                        queue_id: tableInfo.queueId,
                        cuisine_menu: JSON.stringify(cuisine_menu),
                        token: this.token
                    }).then(res => {
                        Indicator.close();
                        if (res.data.error === 0) {
                            Toast('菜品预约成功');
                            setTimeout(() => {
                                window.location.href = `/inNumber?store=${tableInfo.store}`
                            }, 2000)
                        } else {
                            Toast(res.data.desc || '系统错误')
                        }
                    }).catch(e => {
                        Toast('系统错误')
                    })
                } else {
                    Toast('请先选择菜品')
                }
            }
        }
    }
</script>
<style lang="less">
    @shadowColor: rgba(0, 0, 0, 0.1);
    // @shadow-top: 0px -2px 10px @shadowColor;
    @shadow-top: 0 -5px 10px -5px @shadowColor;
    @shadow-bottom: 0px 5px 10px -5px @shadowColor;
    @shadow-right: -5px 0px 10px -5px @shadowColor inset;
    .wrapper {
        display: flex;
        flex-direction: column;
        height: 100vh;
        .title, .notice {
            height: 32px;
            padding-left: 20px;
        }
        .title {
            img {
                margin: 0 10px 5px 0;
                width: 16px;
                height: 16px;
                border-radius: 50%;
            }
        }
        .notice-list,
        .notice {
            font-size: 12px;
            color: #b3b3b3;
            line-height: 32px;
            align-items: center;
            display: flex;
            > img {
                margin-right: 10px;
                width: 16px;
            }
        }
        .notice-list {
            flex: 1;
        }
        .notice-container {
            height: 32px;
            flex: 1;
            overflow: hidden;
            position: relative;
            .notice-ul {
                position: absolute;
                left: 5px;
            }
        }
        .title {
            font-size: 18px;
            font-weight: bold;
            display: flex;
            align-items: flex-end;
        }
        .main {
            flex: 1;
            display: flex;
            .groups {
                width: 95px;
                overflow: auto;
                box-shadow: @shadow-top;
                > li {
                    // box-shadow: @shadow-right;
                    height: 60px;
                    line-height: 60px;
                    text-align: center;
                    font-size: 16px;
                    color: black;
                }
                .curr-group {
                    box-shadow: @shadow-top, @shadow-bottom;
                    border-left: 8px solid #FFD200;
                    background: white;
                }
            }
            .foods {
                flex: 1;
                box-shadow: @shadow-top;
                overflow: auto;
                .foods-wrapper {
                    list-style: none;
                    padding: 0 15px;
                    background: white;
                    > li {
                        display: flex;
                        padding: 10px 0;
                        box-sizing: border-box;
                        height: 100px;
                        border-bottom: 1px solid #EDEDED;
                        > img {
                            width: 80px;
                            height: 80px;
                            background: #eee;
                        }
                        > div {
                            display: flex;
                            flex-direction: column;
                            padding: 0 10px;
                            flex: 1;
                            justify-content: space-between;
                            .food-title {
                                > .name {
                                    font-size: 16px;
                                }
                                > .desc {
                                    font-size: 10px;
                                    color: #B3B3B3;
                                    margin-top: 3px;
                                }
                            }
                            .price {
                                display: flex;
                                justify-content: space-between;
                                > span {
                                    color: #FF5B29;
                                    font-size: 18px;
                                }
                                .step {
                                    display: flex;
                                    width: 56px;
                                    justify-content: space-between;
                                    font-size: 14px;
                                    line-height: 27px;
                                    img {
                                        width: 20px;
                                    }
                                    .hidden {
                                        visibility: hidden;
                                    }
                                    .guige {
                                        border: 1px solid #232323;
                                        padding: 0 5px;
                                        height: 20px;
                                        line-height: 18px;
                                        margin-top: 3px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .foot-wrapper {
            height: 65px;
        }
        .footer {
            z-index: 9;
            position: absolute;
            height: 65px;
            display: flex;
            padding-left: 24px;
            box-sizing: border-box;
            width: 100vw;
            .totalPrice {
                width: 201px;
                display: flex;
                align-items: center;
                > img {
                    height: 50px;
                    transform: translateY(-18px);
                }
                > div {
                    transform: translateY(-40px) translateX(-17px);
                    font-size: 10px;
                    width: 20px;
                    height: 20px;
                    background: red;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 20px;
                }
                > span {
                    font-size: 18px;
                    color: #FF5B29;
                }
            }
            .btn {
                flex: 1;
                text-align: center;
                font-size: 18px;
                line-height: 65px;
                background: black;
                color: white;
            }
        }
        .select-menu {
            transition: display 2s;
            position: absolute;
            bottom: 65px;
            width: 100%;
            z-index: 2;
        }
        .mask {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 65px;
            background: rgba(0, 0, 0, .3);
        }
        .guige-body {
            width: 295px;
            height: 265px;
            background: #FFFFFF;
            box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.10);
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            .header {
                height: 45px;
                line-height: 45px;
                border-bottom: 1px solid #EDEDED;
                font-size: 18px;
                color: #000000;
                letter-spacing: 0.22px;
                text-align: center;
                position: relative;
                .close {
                    position: absolute;
                    display: block;
                    width: 36px;
                    height: 36px;
                    top: -18px;
                    right: -18px;
                    border-radius: 50%;
                    background: #fff url(../components/common/img/x@1x.png) no-repeat center;
                }
            }
            .body {
                flex: 1;
                padding: 20px;
                .name {
                    font-size: 18px;
                    color: #000000;
                    letter-spacing: 0.22px;
                }
                .item {
                    width: 77px;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                    border: 1px solid #000000;
                    border-radius: 20px;
                    display: inline-block;
                    margin: 25px 4px;
                    &.active {
                        border: 2px solid #FFD200;
                        color: #FFD200;
                    }
                }
            }
            .foot {
                height: 65px;
                line-height: 65px;
                text-align: center;
                background: #FFFFFF;
                box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.10);
                display: flex;
                border-radius: 5px;
                .item {
                    flex: 1;
                    border-radius: 0 0 0 5px;
                    &.left {
                        background: #FFFFFF;
                        font-size: 18px;
                        color: #000000;
                        .unit {
                            padding: 0 5px;
                            font-size: 12px;
                            color: #000000;
                            letter-spacing: 0.22px;
                            line-height: 25px;
                        }
                    }
                    &.right {
                        background: #000000;
                        font-size: 18px;
                        color: #FFFFFF;
                        border-radius: 0 0 5px 0;
                    }
                }
            }
        }
    }
    .mint-popup {
        border-radius: 5px;
    }
</style>
